<template>
    <div class="container" style="height: 700px;">
    <!-- 页面部分 -->
    <div class="xm-product-box">
        <div class="nav-bar">
            <div class="container">
                <h2 class="Producth2">Redmi K30 Pro 12GB+128GB</h2>
                <div class="con">
                    <div class="left"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="mi-detail">
        <div class="detail-left">
            <div class="detail-left-con">
                <ul class="img-list">
                    <li><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1590564927.0221071.jpg"></li>
                    <li>
                        <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1590564927.01313044.jpg">
                    </li>
                    <li><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1590564927.027176.jpg"></li>
                </ul>
                <div class="swiper-button swiper-button-pre">&lt;</div>
                <div class="swiper-button swiper-button-next">&gt;</div>
                <ul class="num-list">
                    <li class="bg"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

        </div>
        <div class="detail-right">
            <div class="pro-title"></div>
            <div class="pro-summary">
                
            </div>
            <div class="pro-price">
                <div class="pro-price-con">
                    <div class="pro-mspice">秒杀价：<span>￥</span></div>
                    <div class="pro-scprice">市场价：<span>￥</span></div>
                </div>
                <div class="pro-time"></div>
            </div>
            <div class="pro-stock">现有库存：<span>0</span></div>
            <div class="pro-order">
                <a href="javascript:;">立即抢购</a>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import $ from 'jquery';
import baseUrl from "../evn";
export default {
  name: "seckilldetail",
  components: {
  },
  mounted() {
    this.loaldSeckillDetail();
    this.StartSeckill();
    this.initSeckillTimes();
    this.showStart();
    this.initSeckillShow();
  },
  data(){
    return {
        ProductId:0,
        SeckillCount:1,
        SeckillPrice:0.00,
        SeckillUrl:"",
        SeckillName:"",
        picIndex:null,
        timer:null,
        seckillId:this.$route.params.seckillId,
        endtime:this.$route.params.endtime
    }
  },
  methods: {
    loaldSeckillDetail(){
        var self = this;
        $.ajax({
        method: "GET",
        url: "http://localhost:5003/api/SeckillDetail/" + self.seckillId,
        dataType: "json",
        success: function (result) {
            if (result.ErrorNo == "0") {
                // 1、获取结果
                var resultDic = result.ResultDic;

                // 2、填充数据到页面上
                console.log(resultDic);
                $(".Producth2").html(resultDic.SeckillName);
                $(".pro-title").html(resultDic.SeckillName);
                $(".pro-summary").html(resultDic.SeckillDescription);
                $(".pro-mspice").find("span").html("￥" + resultDic.SeckillPrice);
                $(".pro-scprice").find("span").html("￥" + resultDic.SeckillPrice);
                $(".pro-stock").find("span").html(resultDic.SeckillStock);

                // 3、秒杀倒计时
                self.countDown2();

                // 4、设置订单所需参数
                self.ProductId = resultDic.ProductId;
                self.SeckillPrice = resultDic.SeckillPrice;
                self.SeckillUrl = resultDic.SeckillUrl;
                self.SeckillName = resultDic.SeckillName;
                
            } else {
                alert(result.ErrorInfo);
            }
        }
        })
    },
    StartSeckill(){
        var self = this;
        $(".pro-order a").click(function () {
            // 4.2 跳转到详情页
            self.$router.push({
                name:"seckillorder",
                params:{
                    "ProductId":self.ProductId,
                    "SeckillCount":self.SeckillCount,
                    "SeckillPrice":self.SeckillPrice,
                    "SeckillUrl":self.SeckillUrl,
                    "SeckillName":self.SeckillName
                }
            });
        })
    },
    initSeckillTimes(){
        var self = this;
      // 1、秒杀倒计时
      setInterval(() => {
        self.countDown2();
      }, 1000);
    },
    countDown2(){
        var nowtime = new Date();
        var endtime1 = new Date(this.endtime);
        var lefttime = parseInt((endtime1.getTime() - nowtime.getTime()) / 1000);
        var d = parseInt(lefttime / (24 * 60 * 60))
        var h = parseInt(lefttime / (60 * 60) % 24);
        var m = parseInt(lefttime / 60 % 60);
        var s = parseInt(lefttime % 60);
        h = this.addZero(h);
        m = this.addZero(m);
        s = this.addZero(s);
        var sTime = "倒计时：" + d + "天" + h + "时" + m + "分" + s + "秒";
        $(".pro-time").html(sTime).css("line-height", "20px");
        $(".pro-order a").text("立即抢购").removeClass("btnDis");
        if (lefttime <= 0) {
            $(".pro-time").html("活动已结束");
            $(".pro-order a").text("活动已结束").addClass("btnDis").attr("href", "javascript:void(0);");
            return;
        }
        if (parseInt($(".pro-stock span").text()) == 0) {
            $(".pro-order a").text("已售罄").addClass("btnDis").attr("href", "javascript:void(0);");
            return;
        }
    },
    addZero(i){
        return i < 10 ? "0" + i : i + "";
    },
    showStart(){
        var self = this;
        this.timer = setInterval(function () {
            self.picIndex++;
            if (self.picIndex == 3) {
                self.picIndex = 0;
            }
            self.showAll();
        }, 2000);
    },
    showAll(){
        var self = this;
        $(".img-list li").eq(self.picIndex).stop(true, true).fadeIn().siblings().stop(true, true).fadeOut();
        $(".num-list li").eq(self.picIndex).addClass("bg").siblings().removeClass("bg");
    },
    initSeckillShow(){
        var self = this;
        $(".swiper-button-pre,.swiper-button-next").hover(function () {
        clearInterval(self.timer);
        }, function () {
            self.showStart();
        });
        $(".swiper-button-pre").click(function () {
            self.picIndex--;
            if (self.picIndex == -1) {
                self.picIndex = 2;
            }
            self.showAll();
        });
        $(".swiper-button-next").click(function () {
            self.picIndex++;
            if (self.picIndex == 3) {
                self.picIndex = 0;
            }
            self.showAll();
        });
        $(".num-list li").hover(function () {
            clearInterval(self.timer);
            self.picIndex = $(this).index();
            self.showAll();
        }, function () {
            self.showStart();
        });
    }
  }
};
</script>
<style>

.xm-product-box .nav-bar h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 60px;
    color: #424242;
    float: left;
}
.container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
.xm-product-box .nav-bar {
    position: relative;
    height: 63px;
    width: 100%;
    margin-top: 0;
    color: #616161;
}
.xm-product-box {
    position: relative;
    z-index: 4;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 5px 5px rgba(0,0,0,.07);
}
.mi-detail{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}
.mi-detail .detail-left{
    width: 560px;
    height: 560px;
    float: left;
}
.mi-detail .detail-right{
    float: left;
}
.mi-detail .detail-left .img-list li{
  position: absolute;;
}
.mi-detail .detail-left .img-list img{
    width: 560px;
    height: 560px;
}

.mi-detail .detail-left .swiper-button
{
    position: absolute;
    width: 40px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: #999;
    font-size: 30px;
   top: 50%;
   cursor: pointer;
   margin-top: -35px;
   color: #fff;
    
}
.swiper-button-pre{
    left: 0px;
}
.swiper-button-next{
    right: 0px;
}
.detail-left .detail-left-con{
    width: 560px;
    height: 560px;
    position: absolute;
}
.num-list{
    position: absolute;
    bottom: 20px;
    left: 250px;
}
.num-list li{
    width: 20px;
    height: 20px;
    background-color: #ccc;
    float: left;
    margin-right: 10px;
    border-radius: 100%;
    cursor: pointer;
}
.num-list .bg{
    background-color: #999;
}
.detail-right
{
    width: 600px;
    margin-left: 20px;
    
}
.pro-title
{
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    color: #212121;
 
}
.pro-summary
{
    margin: 10px 0px;
}
.pro-price
{
    width: 535px;
    height: 62px;
    background-color: #ff6700;
    margin: 10px 0px;
    color: #fff;
}
.pro-price div{
    margin-left: 10px;
}

.pro-mspice,.pro-scprice{
    width: 140px;
    text-align: center;
}
.pro-scprice{
text-decoration:line-through; 
}
.pro-order a{
    width: 100px;
    height: 40px;
    display: block;
    background-color: #ff6700;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
.pro-stock
{
    margin-bottom: 10px;
}
.pro-order .btnDis{
    background-color:#ccc;
}
.pro-price-con,.pro-time{
    margin-top: 5px;
    float:left;
}
.pro-time{
    float: right;
    margin-top: 20px;
    margin-right: 10px;
}
.pro-mspice span{
    font-size: 20px;
}
</style>